<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称"> {{ row.spuName }}</el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)" v-model="skuInfo.price" type="number"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" placeholder="规格描述" rows="3" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <!-- 平台属性 -->
      <el-form-item label="平台属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item :label="attr.attrName" v-for="(attr, index) in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue, index) in attr.attrValueList" :key="attrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr, index) in spuSaleAttrList" :key="saleAttr.id">
            <el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueid">
              <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue, index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 图片列表 -->
      <el-form-item label="图片列表">
        <el-table style="width: 100%" border :data="spuImage" @selection-change="handleSelectionChange">
          <el-table-column label="图片" prop="label" width="80" type="selection" align="center"> </el-table-column>
          <el-table-column label="图片" prop="label" width="width">
            <template #default="{ row, $index }">
              <img :src="row.imgUrl" alt="" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName" width="width"> </el-table-column>
          <el-table-column label="操作" prop="label" width="width">
            <template v-slot:default="{ row, $index }">
              <el-button type="primary" v-if="!row.isDeafault" @click="changeisDeafault(row, $index)">设置默认</el-button>
              <el-button type="" v-else @click="row.isDeafault = 0">默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="goScreen">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SkuForm',
  data() {
    return {
      spuImage: [], //存储图片数据
      spuSaleAttrList: [], //存储销售属性
      attrInfoList: [], //存储平台属性
      skuInfo: {
        // 父组件给的
        category3Id: '',
        spuId: '',
        tmId: '',
        // 子组件自己收集的（数据的双向绑定）
        skuName: '',
        price: '',
        weight: '',
        skuDesc: '',
        // 平台属性
        skuAttrValueList: [
          /*  {
            attrId: 0,
            valueId: 0,
          }, */
        ],
        //销售属性
        skuSaleAttrValueList: [
          /* {
            saleAttrId: 0,
            saleAttrValueId: 0,
          }, */
        ],
        // 默认图片
        skuDefaultImg: '',
        // 图片列表
        skuImageList: [
          /*  {
            imgName: '',
            imgUrl: '',
            isDefault: '',
            spuImgId: 0,
          }, */
        ],
      }, //搜集sku的数据
      row: {},
      imageList: [], //收集图片数据  但注意的是收集的信息中缺少isDeafault字段
    }
  },
  methods: {
    //取消按钮的事件
    goScreen() {
      this.$emit('changeScreen', 1)
      // 清除数据
      Object.assign(this._data, this.$options.data())
    },
    //获取sku的数据
    getData(data) {
      let [category1Id, category2Id, category3Id, row] = data
      Promise.all([
        // 获取图片数据
        this.$api.sku.reqSpuImage({ spuId: row.id }),
        //获取销售属性
        this.$api.sku.reqSpuSalveAttrList({ spuId: row.id }),
        //获取平台属性
        this.$api.sku.reqAttrInfoList({ category1Id, category2Id, category3Id }),
      ]).then(([res, res1, res2]) => {
        if (res.code == 200 && res1.code == 200 && res2.code == 200) {
          // 处理图数据
          let list = res.data
          list.forEach((item) => {
            item.isDeafault = 0
          })
          this.spuImage = list
          this.spuSaleAttrList = res1.data
          this.attrInfoList = res2.data
        }
      })
      this.skuInfo.category3Id = category3Id
      this.skuInfo.spuId = row.id
      this.skuInfo.tmId = row.tmId
      this.row = row
    },
    //表格的选项事件
    handleSelectionChange(val) {
      // 获取用户选中的图片信息，但注意的是收集的信息中缺少isDeafault字段
      this.imageList = val
    },
    // 改变默认按钮
    changeisDeafault(row) {
      // 将isDeafault变为1 ，其他的isDeafault变为0
      this.spuImage.forEach((item) => {
        item.isDeafault = 0
      })
      row.isDeafault = 1
      // 收集默认图片信息
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 保存按钮
    async save() {
      // 还有skuAttrValueList，skuImageList，skuSaleAttrValueList没有收集，数据还需整理收集
      // 1.整理平台属性
      const { attrInfoList, skuInfo, spuSaleAttrList, imageList } = this
      attrInfoList.forEach((item) => {
        if (item.attrIdAndValueId) {
          const [attrId, valueId] = item.attrIdAndValueId.split(':')
          skuInfo.skuAttrValueList.push({ attrId, valueId })
        }
      })
      // 2.整理销售属性
      spuSaleAttrList.forEach((item2) => {
        if (item2.attrIdAndValueid) {
          const [saleAttrId, saleAttrValueId] = item2.attrIdAndValueid.split(':')
          skuInfo.skuSaleAttrValueList.push({ saleAttrId, saleAttrValueId })
        }
      })
      // 3.整理图片的数据
      skuInfo.skuImageList = imageList.map((item3) => {
        return {
          imgName: item3.imgName,
          imgUrl: item3.imgUrl,
          isDefault: item3.isDeafault,
          spuImgId: item3.spuId,
        }
      })
      //发送请求
      let res = await this.$api.sku.reqAddSku(skuInfo)
      if (res.code == 200) {
        this.$message({ type: 'success', message: '添加SKU成功' })
        this.$emit('changeScreen', 1)
      }
    },
  },
}
</script>

<style>
</style>